<div class="card card-body mb-3">
  <div class="d-flex flex-row justify-content-between">
    <div class="d-flex flex-column me-3 align-items-center justify-content-between">
      <img [src]="plugin.icon" (error)="handleIconError()" alt="Plugin Icon" class="plugin-icon-card mb-3" />
    </div>
    <div class="d-flex flex-column justify-content-between" style="min-width: calc(100% - 80px)">
      <div class="d-flex flex-row align-items-end">
        <div class="d-flex flex-column w-100">
          <!-- plugin name and right 'action' icon -->
          <div class="d-flex flex-row">
            <h5 class="card-title mb-2 text-truncate">{{ plugin.displayName }}</h5>
            @if (isAdmin) {
            <div class="ms-auto">
              <!-- update available -->
              @if (plugin.installedVersion && plugin.updateAvailable && !childBridgeRestartInProgress) {
              <a
                href="javascript:void(0)"
                class="card-link"
                (click)="checkAndUpdatePlugin()"
                container="body"
                [openDelay]="150"
                triggers="hover"
                [ngbTooltip]="'plugins.button_update' | translate"
                [attr.aria-label]="'plugins.button_update' | translate"
              >
                <i
                  class="far fa-arrow-alt-circle-up primary-text fa-lg fa-fade ms-3"
                  style="--fa-animation-duration: 2s"
                ></i>
              </a>
              }
              <!-- // -->
              <!-- switch to scoped available -->
              @if (plugin.installedVersion && plugin.newHbScope?.switch === plugin.installedVersion &&
              !childBridgeRestartInProgress) {
              <a
                href="javascript:void(0)"
                class="card-link"
                (click)="switchToScoped()"
                container="body"
                [openDelay]="150"
                triggers="hover"
                [ngbTooltip]="'plugins.manage.scoped.switch' | translate"
                [attr.aria-label]="'plugins.manage.scoped.switch' | translate"
              >
                <i
                  class="fas fa-arrow-right-arrow-left primary-text fa-lg fa-fade ms-3"
                  style="--fa-animation-duration: 2s"
                ></i>
              </a>
              }
              <!-- // -->
              <!-- installed, not configured -->
              @if (plugin.installedVersion && (!plugin.newHbScope || plugin.newHbScope.switch !==
              plugin.installedVersion) && !plugin.updateAvailable && !plugin.isConfigured &&
              !childBridgeRestartInProgress && !plugin.disabled) {
              <a
                href="javascript:void(0)"
                class="card-link"
                (click)="openSettings()"
                [ngbTooltip]="'plugins.button_set_up' | translate"
                container="body"
                [openDelay]="150"
                triggers="hover"
                [attr.aria-label]="'plugins.button_set_up' | translate"
              >
                <i class="fas fa-sliders primary-text fa-lg fa-fade ms-3" style="--fa-animation-duration: 2s"></i>
              </a>
              }
              <!-- // -->
              <!-- installed, configured, not setup as child bridge although recommended -->
              @if (plugin.installedVersion && (!plugin.newHbScope || plugin.newHbScope.switch !==
              plugin.installedVersion) && !plugin.updateAvailable && plugin.isConfigured && !plugin.hasChildBridges &&
              !plugin.disabled && plugin.recommendChildBridge && !childBridgeRestartInProgress) {
              <a
                href="javascript:void(0)"
                class="card-link"
                (click)="openBridgeSettings()"
                [ngbTooltip]="'child_bridge.setup' | translate"
                container="body"
                [openDelay]="150"
                triggers="hover"
                [attr.aria-label]="'child_bridge.setup' | translate"
              >
                <i
                  class="icon-button fas fa-bridge primary-text fa-lg fa-fade ms-3"
                  style="--fa-animation-duration: 2s"
                ></i>
              </a>
              }
              <!-- // -->
              <!-- installed, configured, setup as child bridge, not paired with homekit -->
              @if (plugin.installedVersion && (!plugin.newHbScope || plugin.newHbScope.switch !==
              plugin.installedVersion) && !plugin.updateAvailable && plugin.isConfigured && plugin.hasChildBridges &&
              !childBridgeRestartInProgress && plugin.hasChildBridgesUnpaired && childBridgeStatus === 'ok' &&
              !plugin.disabled) {
              <a
                href="javascript:void(0)"
                class="card-link"
                (click)="openBridgeSettings()"
                [ngbTooltip]="'child_bridge.bridge_connect' | translate"
                container="body"
                [openDelay]="150"
                triggers="hover"
                [attr.aria-label]="'child_bridge.bridge_connect' | translate"
              >
                <i
                  class="icon-button fas fa-qrcode primary-text fa-lg fa-fade ms-3"
                  style="--fa-animation-duration: 2s"
                ></i>
              </a>
              }
              <!-- // -->
              <!-- restart in progress spinner -->
              <i [hidden]="!childBridgeRestartInProgress" class="fas fa-spinner fa-pulse fa-lg grey-text ms-3"></i>
              <!-- // -->
              <!-- child bridge status (good status is not shown) -->
              @if (plugin.installedVersion && (!plugin.newHbScope || plugin.newHbScope.switch !==
              plugin.installedVersion) && !plugin.updateAvailable && plugin.isConfigured && plugin.hasChildBridges &&
              !childBridgeRestartInProgress && !plugin.hasChildBridgesUnpaired && childBridgeStatus !== 'ok' &&
              !plugin.disabled) {
              <i
                class="fas fa-lg ms-3"
                [ngClass]="{
                  'fa-bridge-circle-exclamation orange-text': childBridgeStatus === 'pending',
                  'fa-bridge-circle-xmark red-text': childBridgeStatus === 'down'
                }"
              ></i>
              }
              <!-- // -->
            </div>
            }
          </div>
          <!-- // -->
          <!-- plugin npm name/info modal -->
          <p class="card-text mb-2 text-truncate">
            <a href="javascript:void(0)" (click)="pluginInfoModal(plugin)" class="card-link">
              <i
                class="fas fa-shield-alt fa-lg me-1"
                [ngClass]="{
                  'purple-text': plugin.isHbScoped,
                  'green-text': !plugin.isHbScoped && (plugin.verifiedPlugin || plugin.verifiedPlusPlugin),
                  'orange-text': !plugin.isHbScoped && !plugin.verifiedPlugin && !plugin.verifiedPlusPlugin,
                }"
              ></i>
              <span class="grey-text">{{ plugin.name }}</span>
            </a>
          </p>
          <!-- // -->
          <!-- plugin author and donate modal -->
          <p class="card-text mb-2">
            @if ((plugin.verifiedPlugin || plugin.verifiedPlusPlugin) && plugin.funding) {
            <a href="javascript:void(0)" class="card-link" (click)="openFundingModal(plugin)">
              <i class="fas fa-heart fa-lg me-1 pink-text"></i>
              <span class="grey-text">&#64;{{ plugin.author }}</span>
            </a>
            } @if (!((plugin.verifiedPlugin || plugin.verifiedPlusPlugin) && plugin.funding)) {
            <span class="grey-text">
              <i class="fas fa-heart fa-lg me-1" style="opacity: 0.5"></i>&#64;{{ plugin.author }}
            </span>
            }
          </p>
          <!-- // -->
          <!-- plugin versioning and actions dropdown -->
          <div class="d-flex flex-row">
            <p class="card-text mb-0 grey-text">
              <!-- not installed -->
              @if (plugin.publicPackage && !plugin.installedVersion) {
              <span>
                <i class="far fa-circle-dot fa-lg me-1"></i>
                <span class="grey-text"
                  >v{{ plugin.latestVersion }} @if (plugin.lastUpdated) {
                  <span>({{ plugin.lastUpdated | date:'yyyy-MM-dd' }})</span>
                  }
                </span>
              </span>
              }
              <!-- // -->
              <!-- installed -->
              @if (plugin.installedVersion) {
              <i class="far fa-circle-check fa-lg me-1"></i>v{{ plugin.installedVersion }} }
              <!-- // -->
            </p>
            @if (isAdmin) {
            <div class="ms-auto">
              <!-- icon for child bridge restart -->
              @if (!plugin.disabled && plugin.hasChildBridges && childBridgeStatus === 'ok') {
              <a
                href="javascript:void(0)"
                (click)="doChildBridgeAction('restart')"
                class="card-link"
                container="body"
                [openDelay]="150"
                triggers="hover"
                [ngbTooltip]="(setChildBridges.length > 1 ? 'child_bridge.restart_plural' : 'child_bridge.restart') | translate"
              >
                <i class="fas fa-lg fa-power-off ms-3"></i>
              </a>
              }
              <!-- // -->
              <!-- icon for plugin disabled -->
              @if (plugin.installedVersion && plugin.disabled) {
              <a href="javascript:void(0)" (click)="enablePlugin(plugin)" class="card-link red-text">
                <i
                  class="far fa-pause-circle fa-lg"
                  [ngbTooltip]="'plugins.status_disabled' | translate"
                  container="body"
                  [openDelay]="150"
                  triggers="hover"
                ></i>
              </a>
              }
              <!-- // -->
              <!-- icon for plugin not installed, to download -->
              @if (plugin.publicPackage && !plugin.installedVersion) {
              <a href="javascript:void(0)" (click)="installAlternateVersion()">
                <i class="far fa-arrow-alt-circle-down fa-lg"></i>
              </a>
              }
              <!-- // -->
              @if (plugin.installedVersion) {
              <span ngbDropdown placement="left" class="d-inline-block ms-3 mt-auto">
                <!-- icon to expand dropdown -->
                <a
                  class="card-link text-decoration-none mt-auto"
                  href="javascript:void(0)"
                  style="outline: none"
                  [attr.aria-label]="'Plugin Actions Dropdown'"
                  ngbDropdownToggle
                >
                  <i class="fa-solid fa-ellipsis-v fa-lg"></i>
                </a>
                <!-- // -->
                <div ngbDropdownMenu aria-labelledby="Plugin Actions Dropdown">
                  <!-- plugin config -->
                  <button ngbDropdownItem (click)="openSettings()">
                    <i class="fas fa-sliders"></i>
                    {{ 'plugins.button_settings' | translate }}
                  </button>
                  <!-- // -->
                  <!-- plugin logs -->
                  @if (plugin.isConfigured && !plugin.disabled) {
                  <button ngbDropdownItem (click)="viewPluginLog()">
                    <i class="fas fa-wave-square"></i> {{ 'plugins.manage.plugin_logs' | translate }}
                  </button>
                  }
                  <!-- // -->
                  <!-- plugin manage version -->
                  @if (plugin.publicPackage) {
                  <button ngbDropdownItem (click)="installAlternateVersion()">
                    <i class="fas fa-code-compare"></i>
                    {{ 'plugins.manage.manage_version' | translate }}
                  </button>
                  }
                  <!-- // -->
                  <!-- plugin manage config json -->
                  @if (!isMobile && plugin.name !== 'homebridge-config-ui-x') {
                  <button ngbDropdownItem (click)="openJsonEditor()">
                    <i class="fas fa-code"></i> {{ 'plugins.manage.json_config' | translate }}
                  </button>
                  }
                  <!-- // -->
                  <!-- plugin disable, when enabled -->
                  @if (plugin.name !== 'homebridge-config-ui-x' && !plugin.disabled) {
                  <button ngbDropdownItem (click)="disablePlugin(plugin)">
                    <i class="far fa-circle-pause"></i> {{ 'plugins.manage.disable' | translate }}
                  </button>
                  }
                  <!-- // -->
                  <!-- plugin enable, when disabled -->
                  @if (plugin.name !== 'homebridge-config-ui-x' && plugin.disabled) {
                  <button ngbDropdownItem (click)="enablePlugin(plugin)">
                    <i class="far fa-circle-play"></i> {{ 'plugins.manage.enable' | translate }}
                  </button>
                  }
                  <!-- // -->
                  <!-- plugin uninstall -->
                  @if (plugin.name !== 'homebridge-config-ui-x') {
                  <button ngbDropdownItem (click)="uninstallPlugin()">
                    <i class="fas fa-trash"></i> {{ 'plugins.button_uninstall' | translate }}
                  </button>
                  }
                  <!-- // -->
                  @if (!plugin.disabled && plugin.isConfigured && plugin.hasChildBridges && plugin.installedVersion &&
                  plugin.name !== 'homebridge-config-ui-x') {
                  <div class="dropdown-divider"></div>
                  } @if (plugin.hasChildBridges && !plugin.disabled) {
                  <!-- child bridge settings -->
                  <button ngbDropdownItem (click)="openBridgeSettings()">
                    <i class="fas fa-bridge"></i> {{ 'child_bridge.bridge_settings' | translate }}
                  </button>
                  <!-- // -->
                  <!-- child bridge restart -->
                  @if (!childBridgeRestartInProgress) {
                  <button ngbDropdownItem (click)="doChildBridgeAction('restart')">
                    <i class="icon-button fas fa-power-off"></i> {{ (setChildBridges.length > 1 ?
                    'child_bridge.restart_plural' : 'child_bridge.restart') | translate }}
                  </button>
                  }
                  <!-- // -->
                  <!-- child bridge stop -->
                  @if (!allChildBridgesStopped) {
                  <button ngbDropdownItem (click)="doChildBridgeAction('stop')">
                    <i class="fas fa-stop"></i> {{ (setChildBridges.length > 1 ? 'child_bridge.stop_plural' :
                    'child_bridge.stop') | translate }}
                  </button>
                  }
                  <!-- // -->
                  <!-- child bridge start -->
                  @if (allChildBridgesStopped) {
                  <button ngbDropdownItem (click)="doChildBridgeAction('start')">
                    <i class="fas fa-play"></i> {{ (setChildBridges.length > 1 ? 'child_bridge.start_plural' :
                    'child_bridge.start') | translate }}
                  </button>
                  }
                  <!-- // -->
                  <!-- child bridge reset -->
                  <button ngbDropdownItem (click)="resetChildBridges()">
                    <i class="fas fa-broom"></i> {{ 'child_bridge.reset_accessories' | translate }}
                  </button>
                  <!-- // -->
                  } @if (plugin.isConfigured && !plugin.hasChildBridges && !plugin.disabled &&
                  !plugin.recommendChildBridge) {
                  <div class="dropdown-divider"></div>
                  }
                  <!-- child bridge setup, when not recommended -->
                  @if (plugin.isConfigured && !plugin.hasChildBridges && !plugin.disabled &&
                  !plugin.recommendChildBridge) {
                  <button ngbDropdownItem (click)="openBridgeSettings()">
                    <i class="icon-button fas fa-bridge"></i>
                    {{ 'child_bridge.setup' | translate }}
                  </button>
                  }
                  <!-- // -->
                  <!-- child bridge setup, edge case, when not configured, recommended, but update icon blocks setup -->
                  @if (plugin.isConfigured && !plugin.hasChildBridges && !plugin.disabled && plugin.recommendChildBridge
                  && plugin.updateAvailable) {
                  <div class="dropdown-divider"></div>
                  } @if (plugin.isConfigured && !plugin.hasChildBridges && !plugin.disabled &&
                  plugin.recommendChildBridge && plugin.updateAvailable) {
                  <button ngbDropdownItem (click)="openBridgeSettings()">
                    <i class="icon-button fas fa-bridge"></i>
                    {{ 'child_bridge.setup' | translate }}
                  </button>
                  }
                  <!-- // -->
                  <!-- report an issue link -->
                  @if (plugin.links?.bugs) {
                  <div class="dropdown-divider"></div>
                  } @if (plugin.links?.bugs) {
                  <a ngbDropdownItem rel="noopener noreferrer" target="_blank" [href]="plugin.links.bugs">
                    <i class="icon-button fa fa-question-circle-o"></i>
                    {{ 'support.links.issue' | translate }}
                  </a>
                  }
                  <!-- // -->
                </div>
              </span>
              }
            </div>
            }
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
